@function getRemNum($rem) {
  @return ($rem /37.5)
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  background: #F5F5F5;
}

header {
  margin: getRemNum(25rem) auto 0;
  width: getRemNum(343rem);
  height: getRemNum(34rem);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .search-box {
    position: relative;
    height: getRemNum(34rem);
    width: getRemNum(285rem);
    @include flex-center;

    .search-button {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      left: getRemNum(16rem);
      text-align: left;
      display: block;
      width: getRemNum(14.32rem);
      height: getRemNum(14.32rem);
      background: url('https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/searchButton.png') no-repeat;
      background-size: contain;
    }


    input {
      background: #FFFFFF;
      height: getRemNum(34rem);
      width: getRemNum(285rem);
      border-radius: getRemNum(12rem);
      border: none;
      outline: none;
      text-align: left;
      line-height: getRemNum(20rem);
      letter-spacing: getRemNum(1rem);
      box-sizing: border-box;
      padding: 0 getRemNum(40rem);
    }
  }
}

#container {
  width: getRemNum(343rem);
  margin: 0 auto;

  .recently-released {
    .recently-released-text {
      display: flex;
      justify-content: center;
      margin: getRemNum(28rem) auto getRemNum(16rem);
      max-height: getRemNum(25rem);
      font-size: getRemNum(18rem);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: getRemNum(25rem);
    }

    .no-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: getRemNum(628rem);
      color: #D8D8D8;
      font-size: getRemNum(16rem);
      letter-spacing: getRemNum(0.6rem);
      font-family: PingFangSC-Regular, PingFang SC;

      section {
        width: getRemNum(38rem);
        height: getRemNum(38rem);
        background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/emoticon%403x.png") no-repeat;
        background-size: contain;
        margin-bottom: getRemNum(6rem);
      }
    }

    .user-images-recently-released {
      max-height: getRemNum(274rem);
      background: #FFFFFF;
      border-radius: getRemNum(12rem);
      margin-bottom: getRemNum(14rem);

      a {
        max-height: getRemNum(274rem);
        display: flex;
        justify-content: space-between;
        padding: getRemNum(21rem) getRemNum(12rem) getRemNum(21rem) getRemNum(21rem);
        box-sizing: border-box;

        .user-images-recently-released-content {
          font-family: PingFangSC-Regular, PingFang SC;
          width: getRemNum(124rem);
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .user-images-recently-released-title {
            font-family: PingFangSC-Medium, PingFang SC;
            max-height: getRemNum(54rem);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            font-size: getRemNum(13rem);
            font-weight: bold;
            color: #161516;
            line-height: getRemNum(18rem);
          }

          .user-images-recently-released-text {
            max-height: getRemNum(80rem);
            font-size: getRemNum(11rem);
            margin-top: getRemNum(16rem);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            overflow: hidden;
            color: #999999;
            line-height: getRemNum(16rem);
          }

          .user-images-recently-released-address-label {
            display: flex;

            .user-images-recently-released-address {
              font-size: getRemNum(11rem);
              color: #757575;
              margin-top: getRemNum(8rem);
              max-height: getRemNum(15rem);
              overflow: hidden;
            }

            .user-images-recently-released-label {
              color: #89B1FF;
              font-size: getRemNum(11rem);
              margin: getRemNum(8rem) 0 0 getRemNum(8rem);
              max-height: getRemNum(15rem);
              overflow: hidden;
            }
          }

          .user-images-recently-released-personal-information {
            margin-top: getRemNum(12rem);

            .user-images-recently-released-username {
              width: getRemNum(65rem);
              white-space: nowrap;
              display: inline-block;
              padding-top: getRemNum(12rem);
              border-top: rgba(137, 177, 255, 0.5) solid getRemNum(1rem);
              font-size: getRemNum(13rem);
              font-weight: bold;
              color: #333333;
              line-height: getRemNum(18rem);
            }
          }

          .user-images-recently-released-time {
            font-size: getRemNum(10rem);
            color: #999999;
            line-height: getRemNum(14rem);
          }
        }

        .user-images-recently-released-image {
          overflow: hidden;
          width: getRemNum(176rem);
          max-height: getRemNum(232rem);
          min-height: getRemNum(176rem);
          @include flex-center;
          border-radius: getRemNum(10rem);

          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
        }
      }
    }

    .user-text-recently-released {
      width: getRemNum(343rem);
      max-height: getRemNum(172rem);
      background: #FFFFFF;
      border-radius: getRemNum(16rem);
      margin-bottom: getRemNum(14rem);
      position: relative;

      a {
        display: inline-block;
        box-sizing: border-box;
        padding: getRemNum(16rem) getRemNum(21rem) getRemNum(21rem) getRemNum(16rem);
        width: getRemNum(343rem);
        max-height: getRemNum(172rem);

        .user-text-recently-released-information {
          max-height: getRemNum(32rem);
          display: flex;

          .user-text-recently-released-head {
            max-height: getRemNum(32rem);
            width: getRemNum(32rem);
            overflow: hidden;
            border-radius: 50%;

            p {
              max-height: getRemNum(32rem);
              width: getRemNum(32rem);
              border-radius: getRemNum(30rem);
              background: #89B1FF;
              color: #fff;
              line-height: getRemNum(32rem);
              text-align: center;
              font-weight: bold;
              letter-spacing: getRemNum(1rem);
              font-family: PingFangSC-Medium, PingFang SC;
            }

            img {
              height: 100%;
              width: 100%;
              object-fit: cover;
            }
          }

          .user-text-recently-released-personal-information {
            margin-left: getRemNum(8rem);

            .user-text-recently-released-username {
              font-size: getRemNum(13rem);
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: bold;
              color: #333333;
              line-height: getRemNum(18rem);
            }

            .user-text-recently-released-time {
              font-size: getRemNum(10rem);
              font-family: PingFangSC-Regular, PingFang SC;
              color: #999999;
              line-height: getRemNum(14rem);
            }
          }
        }
      }
    }

    .user-text-recently-released-content {
      margin-left: getRemNum(40rem);
      margin-top: getRemNum(8rem);

      .user-text-recently-released-title {
        width: getRemNum(266rem);
        max-height: getRemNum(18rem);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        font-size: getRemNum(13rem);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #140F26;
        line-height: getRemNum(18rem);
      }

      .user-text-recently-released-text {
        width: getRemNum(266rem);
        max-height: getRemNum(49rem);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        margin-top: getRemNum(4rem);
        font-size: getRemNum(11rem);
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999999;
        line-height: getRemNum(16rem);
      }

      .user-text-recently-released-label {
        font-size: getRemNum(11rem);
        color: #89B1FF;
        margin-top: getRemNum(5rem);
        max-height: getRemNum(15rem);
        line-height: getRemNum(15rem);
        overflow: hidden;
      }
    }

    .user-text-recently-released-address {
      font-size: getRemNum(10rem);
      color: #999999;
      position: absolute;
      top: getRemNum(20rem);
      right: getRemNum(21rem);
      display: flex;

      .user-text-recently-released-address-icon {
        margin: 0 getRemNum(3rem) 0 getRemNum(11rem);
        width: getRemNum(12rem);
        max-height: getRemNum(12rem);
        background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Shape%403x.png") no-repeat center center;
        background-size: contain;
      }
    }
  }
}